<template>
  <div class="relative">
    <Map></Map>
    <Player></Player>
    <Cargo></Cargo>
    <Target></Target>
    <div @click="resetLevel" class="bg-orange-500 w-[100px] h-[50px] items-center flex mt-2">重置当前关卡</div>
    <div @click="nextLevel" class="bg-orange-500 w-[100px] h-[50px] items-center flex mt-2" v-if="game.isGameCompleted && !game.ispassAll">下一关</div>
    <div class="bg-orange-500 w-[100px] h-[50px] items-center flex mt-2" v-if="game.ispassAll">已全部通过</div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Map from './Map.vue'
import Player from './Player.vue'
import Cargo from './Cargo.vue'
import Target from './Target.vue'
import { useGameStore } from '@/store/game'
import { gameData } from '@/gameData/index'
const { setupGame, game, nextLevel, resetLevel } = useGameStore()

onMounted(() => {
  setupGame(gameData)
})
</script>

<style lang="scss" scoped></style>
